<template>
  <div class="title-bar" :style="{'height': height, 'background-color': bgColor}">
    <div class="left-slot"  v-if="title ">
      <div v-if="!noback" @click="$router.go(-1)" class="icon-button">
        <chevron-left-icon :size="28" style="color: white;"></chevron-left-icon>
      </div>
    </div>
    <div class="rest-left" v-if="!title">
      <div @click="$router.go(-1)" class="icon-button">
        <chevron-left-icon :size="28" style="color: white;"></chevron-left-icon>
      </div>
    </div>
    <div class="title" v-if="title">
      <h1>{{title}}</h1>
    </div>
    <div class="rest-right" v-if="!title">
      <slot name="rest"></slot>
    </div>
    <div class="right-slot" v-if="title">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    height: { type: String, default: "36px" },
    title: {type:String, default: ''},
    bgColor: {
      type: String,
      default: "#040509"
    },
    noback: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    return {};
  },
  mounted() {
    console.log(this.noback)
  }
};
</script>

<style lang="less" scoped>
.title-bar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.26);
      z-index: 999;
  .title {
    flex-basis: 80%;
    text-align: center;
    h1 {
      font-size: 1rem;
      font-weight: normal;
      color: white;
      position: relative;
      bottom: 2px;
    }
  }
  .left-slot {
    flex-basis: 30%;
    display: flex;
    justify-content: flex-start;
  }
  .rest-left {
    flex-basis: 10%;
    display: flex;
    justify-content: flex-start;
  }
  .right-slot {
    flex-basis: 30%;
    display: flex;
    justify-content: flex-end;
  }
  .rest-right {
    flex-basis: 90%;
    display: flex;
    justify-content:space-around;
  }
}
</style>
